<template>
  <section :id="id" class="accumulation-bar-chart">

  </section>
</template>

<script>
  import echarts from 'echarts'
  import util from '@/libs/util'

  export default {
    name: 'AccumulationBarChart',
    props: {
      data: {
        type: Object,
        default: () => {
          return {'name': ['nam1', 'nam2', 'nam3', 'name4', 'name5', 'name6', 'name7'],
            'value1': [1626, 1180, 686, 324, 304, 295, 265],
            'value2': [162, 118, 68, 32, 30, 29, 25],
            'value3': [162, 118, 68, 32, 30, 29, 25]}
        }
      },
      legend: {
        type: Array,
        default: () => {
          return ['type1', 'type2', 'type3']
        }
      }
    },
    data() {
      return {
        id: 'AccumulationBarChart' + Math.random() * 100000000,
        chart: null
      }
    },
    mounted() {
      this.init(this.data, this.legend)
      this.addChartClick()
    },
    watch: {
      data: {
        handler(value) {
          this.init(this.data, this.legend)
        },
        deep: true
      },
      legend: {
        handler(value) {
          this.init(this.data, this.legend)
        },
        deep: true
      }
    },
    methods: {
      init(data, legend) {
        const option = {
          grid: {
            left: '10%',
            top: util.fontSize(0.5),
            bottom: util.fontSize(0.9),
            right: '3%'
          },
          legend: {
            data: legend,
            icon: 'rect',
            textStyle: {
              color: '#FFF',
              fontSize: util.fontSize(0.24)
            }
          },
          tooltip: {
            show: 'true',
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              fontSize: util.fontSize(0.22)
            }
          },
          xAxis: {
            // data: ['乱堆物堆料', '暴露垃圾', '店外经营', '张贴广告', '无照经营'],
            data: data.name,
            // data: JSON.parse(data.name),
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#E9E9E9',
                width: 1 // 这里是为了突出显示加上的
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: util.fontSize(0.24)
              },
              formatter: function(params) {
                let newParamsName = '' // 最终拼接成的字符串
                const paramsNameNumber = params.length// 实际标签的个数
                const provideNumber = 4// 每行能显示的字的个数
                const rowNumber = Math.ceil(paramsNameNumber / provideNumber)// 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (let p = 0; p < rowNumber; p++) {
                    let tempStr = ''// 表示每一次截取的字符串
                    const start = p * provideNumber// 开始截取的位置
                    const end = start + provideNumber// 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p === rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr// 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              },
              interval: 0
              // rotate: 15
            }
          },
          yAxis: [{
            axisTick: {
              show: true,
              inside: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9E9E9',
                width: 1 // 这里是为了突出显示加上的
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: util.fontSize(0.2)
              }
            },
            splitArea: {
              areaStyle: {
                color: 'rgba(255,255,255,.5)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E9E9E966',
                type: 'dashed'
              }
            }
          }],
          series: [{
            name: legend[0],
            type: 'bar',
            stack: 'accumulation',
            barCategoryGap: '0%',
            barWidth: '20%',
            itemStyle: {
              normal: {
                color: 'rgba(62,129,255,1)'
              },
              emphasis: {
                opacity: 1
              }
            },
            data: data.value1,
            z: 5
          }, {
            name: legend[1],
            type: 'bar',
            stack: 'accumulation',
            barCategoryGap: '0%',
            barWidth: '20%',
            itemStyle: {
              normal: {
                color: 'rgba(0,255,255,1)'
              },
              emphasis: {
                opacity: 1
              }
            },
            data: data.value2,
            z: 5
          }, {
            name: legend[2],
            type: 'bar',
            stack: 'accumulation',
            barCategoryGap: '0%',
            barWidth: '20%',
            itemStyle: {
              normal: {
                color: '#F1E72F'
              },
              emphasis: {
                opacity: 1
              }
            },
            data: data.value3,
            z: 5
          }]
        }
        if (this.chart === null) {
          this.chart = echarts.init(document.getElementById(this.id))
        }

        this.chart.setOption(option)
      },
      addChartClick() {
        this.chart.on('click', (params) => {
          this.$emit('click', params)
        })
      }
    }
  }
</script>

<style scoped>
  .accumulation-bar-chart {
    width: 100%;
    height: 100%;
  }
</style>
